<template>
	<Modal
		ref 		= 'modalRef' 
		:title 		= 'config.title'
		:width 		= 'config.width'
		:height 	= 'config.height'
		:scroll 	= 'true'
		:footer 	= 'false'
		:bodyStyle = "{padding:'10px'}"
	>
		<Image :src='config.src' :styleMode='2' iconSize='40px' :preview='config.preview'/>
	</Modal>
</template>

<script setup>
	/* --------------------------- Component --------------------------- */
	const Modal 		= $.lazy(()=>import('@antd/modal.vue'))
	const Image 		= $.lazy(()=>import('@antd/image.vue'))
	/* --------------------------- props --------------------------- */
	
	/* --------------------------- 两种传值方式 --------------------------- */
	
	/* --------------------------- ref --------------------------- */
	let modalRef = $ref()
	let config = $ref({
		title: '图片预览',
		width:'auto',
		height:'auto',
		preview:true,
		data:null
	})
	/* --------------------------- emit --------------------------- */
	
	/* --------------------------- 通信 --------------------------- */
	defineExpose({
		open: v => {
			modalRef.open()
			config = {
				width:v.width ?? 'auto',
				height:v.height,
				preview:v.preview ?? true,
				src:v.src,
				title:v.title ?? '图片预览'
			}
		}
	})
</script>